<template>
    <div>
        <el-form ref="form" :model="d" label-width="130px" style="width:320px">
            <el-form-item label="原密码" prop="oldpass" :rules="[formRulesMixin.notNull]">
                <el-input v-model="d.oldpass" show-password clearable autocomplete="off" />
            </el-form-item>
            <el-form-item label="新密码" prop="newpass" :rules="[formRulesMixin.notNull,{validator: pass2, trigger: 'blur'}]">
                <el-input v-model="d.newpass" show-password clearable autocomplete="off" />
            </el-form-item>
            <el-form-item label="再次输入新密码" prop="newpass2" :rules="[formRulesMixin.notNull,{validator: pass2, trigger: 'blur'}]">
                <el-input v-model="d.newpass2" show-password clearable autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <span class="btn" @click.prevent="upData">提交</span>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive,getCurrentInstance, ref,computed, toRefs,inject } from 'vue'
let { proxy } = getCurrentInstance()
let d = reactive({
    oldpass:"",
    newpass:"",
    newpass2:"",
});
let pass2 = (rule, value, callback) => {
    if(d.newpass!="" && d.newpass2!=""){
        if(d.newpass!=d.newpass2){
            callback(new Error('两次新密码不一致'))
        }
    }
    callback()
}
let upData = () => {
    proxy.$refs['form'].validate(valid => {
        if (valid) {
            proxy.$ajax({
                url: 'editpass',
                data: d,
                bfLoading: true
            }).then(da => {
                if(da.success){
                    proxy.elMessageMixin(`密码修改成功`, 'success')
                }else{
                    proxy.elMessageMixin(d.err, 'error')
                }
            }).catch(() => { })
        }else{
            return false
        }
    })
}
</script>

<style scoped>
</style>